<template>
	<view class="sort" :style="{width: width + 'rpx',height: height + 'rpx'}" @click="changeMode">
		<view class="sort__asc">
			<image src="@/static/img/component/sort/asc.png" mode=""></image>
			<transition name="fade">
				<image class="sort__asc-active" src="@/static/img/component/sort/asc_active.png" mode="" v-show="mode == 'asc'"></image>
			</transition>
		</view>
		<view class="sort__desc">
			<image src="@/static/img/component/sort/desc.png" mode=""></image>
			<transition name="fade">
				<image class="sort__desc-active" src="@/static/img/component/sort/desc_active.png" mode="" v-show="mode == 'desc'"></image>
			</transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'asc'
			}
		},
		props: {
			width: {
				type: [String,Number],
				default: 80
			},
			height: {
				type: [String,Number],
				default: 80
			},
			default: {
				type: String,
				default: 'asc'
			}
		},
		created() {
			this.mode = this.default;
		},
		methods: {
			changeMode() {
				this.mode = this.mode == 'asc' ? 'desc' : 'asc';
				this.$emit('change',this.mode)
			}
		}
	}
</script>

<style scoped lang="scss">
	.sort {
		position: relative;
		overflow: hidden;
		
		&__asc {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-40%) rotateY(180deg);
			
			&-active {
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		&__desc {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-40%);
			
			&-active {
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
	}
	
	image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.fade-enter-active, .fade-leave-active {
		transition: opacity .25s
	 }
	 .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
		opacity: 0
	} 
</style>
